<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Chewie</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<link rel="stylesheet" href="./css/ui.jqgrid.css" type="text/css" />
	<link rel="stylesheet" href="./css/ui-darkness/jquery-ui-1.8.20.custom.css" type="text/css"/>
	<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="./js/jquery-ui-1.8.20.custom.min.js"></script>
	<script type="text/javascript" src="./js/grid.locale-es.js"></script>
	<script type="text/javascript" src="./js/jquery.jqGrid.src.js"></script>
	<link rel="shortcut icon" href="./res/ChewieIcon.png"/>
	<style type="text/css">
		body
		{
		  margin: 0 auto;
		  padding: 0;
		  color: #262626;
		  background-color: #262626;
		  background-attachment: fixed;
		  background-image: url("./res/fondo.png");
		  background-position: center top;
		  background-repeat: repeat;
		}
	</style>
	<script type="text/javascript">
		var actualTablePage = 1;
		jQuery(document).ready(function (){
			$("#accordion").accordion({ header: "h3" });
			$("#buttonConsultar").button();
			$("#buttonConfigurar").button();
			$("#contenedor").height(470);
			$("#contenedor").css("padding","1em 1.6em")
			$("#buttonConsultar").click(consultar);
			$("#buttonConfigurar").click(configurar);
			$("#consulta").keyup(function(event) {
				if(event.which === 13)
				{
					consultar();
				}
			});

		});
		function consultar() {
			var busq = $("#consulta").val();
			if(busq === "")
			{
				$("#dialogVacio").dialog({
					width: 330,
					height: 230,
					resizable: false,
	                modal: true,
	                buttons: {
	                    Ok: function () {
	                        $(this).dialog("close");
	                    }
	                }
	            });
			}
			else
			{
				$("#buttonConsultar").button("disable");
				$("#loader").show();
				$("#gbox_listaArchivos").hide();
				$.ajax({
	                type: "Get",
	                url: "./restManager/consultasManager/consultar/"+busq,
	                data: "",
	                contentType: "application/json; charset=utf-8",
	                dataType: "json",
	                success: function (data) {
	                	if (data === null || data === undefined) {
	                        return;
	                    }
	                    var cont = 1;
	                    $.each(data, function (key, val) {
	                        var aux = $("<div/>", { class: 'divVer', id: val.doc.id}).append("Ver documento");
	                        aux.button({ icons: { primary: "ui-icon-search" }, text: false });
	                        val.Botones = $("<div/>").append(aux).html();
	                        val.Orden = cont;
	                        ++cont;
	                        var icon = val.doc.extension.clave;
	                        if(icon=="doc" || icon=="docx") { icon = $("<img/>", { alt: "doc", src: "./res/docIco.png"}); }
	                        else if(icon=="xls" || icon=="xlsx") { icon = $("<img/>", { alt: "xls", src: "./res/xlsIco.png"}); }
	                        else if(icon=="ppt" || icon=="pptx") { icon = $("<img/>", { alt: "ppt", src: "./res/pptIco.png"}); }
	                        else if(icon=="pdf") { icon = $("<img/>", { alt: "doc", src: "./res/pdfIco.png"}); }
	                        else if(icon=="txt") { icon = $("<img/>", { alt: "doc", src: "./res/txtIco.png"}); }
	                        val.extension = $("<div/>").append(icon).html();
	                        //val.extension = icon;
	                    });
	                    if($("#gbox_listaArchivos").length === 0){
		                    $("#listaArchivos").jqGrid({
			                    datatype: "local",
			                    data: data,
			                    colNames: ['Id', 'Orden', 'Nombre', 'TF', 'Promedio', 'Extensión', ""],
			                    colModel: [{ name: 'doc.id', index: 'doc.id', hidden: true, key: true },
			                               { name: 'Orden', index: 'Orden', align: "center", resizable: false, sorttype: 'number' },
			                               { name: 'doc.nombre', index: 'doc.nombre', align: "center", resizable: false, sorttype: 'text' },
			                               { name: 'tf.length', index: 'tf.length', align: "center", resizable: false, sorttype: 'text' },
			                               { name: 'promNormalizado', index: 'promNormalizado', align: "center", resizable: false, sorttype: 'number' },
			                               { name: 'extension', index: 'doc.extension.clave', align: "center", resizable: false, sorttype: 'text' },
			                               { name: 'Botones', index: 'Botones', align: "center", resizable: false, sortable: false}],
			                    height: '100%',
			                    width: 880,
			                    rowList: [5],
			                    rowNum: 5,
			                    viewrecords: true,
			                    pager: '#pagerArchivos',
			                    onPaging: function (b) {
			                        if (b === "user") {
			                            if (parseInt($(".ui-pg-input", "#gbox_listaArchivos").val(), 10) > $("#listaArchivos").getGridParam('lastpage') || (parseInt($(".ui-pg-input", "#gbox_listaArchivos").val(), 10) <= 0)) {
			                                alert("Invalid page number"); //Mensaje de error
			                                $("#listaArchivos").setGridParam({ page: actualTablePage });
			                            }
			                            else {
			                                actualTablePage = $("#listaArchivos").getGridParam("page");
			                            }
			                        }
			                    },
			                    beforeSelectRow: function (rowid, e) {
			                        return false;
			                    },
			                    sortname: "Orden",
		                        sortorder: "asc",
			                    loadonce: true,
			                    caption: "Lista de documentos",
			                    emptyrecords: "No existen documentos con ese filtro",
			                    gridComplete: function () {
			                        $(".divVer").click(verDocumento);
			                    }
			                });
		                    $(".ui-pg-input").keyup(function (event) {
		                        if ($(this).val() !== '') {
		                            $(this).val($(this).attr('value').replace(/[^0-9]/g, ""));
		                        }
		                    });
	                    }
	                    else
	                    {
	                    	$("#listaArchivos").jqGrid('clearGridData').jqGrid('setGridParam', { data: data}).trigger('reloadGrid', [{ page: 1}]);
	                    }
	                    $("#buttonConsultar").button("enable");
	                	$("#loader").hide();
	                    $("#gbox_listaArchivos").show();
	                },
	                error: function (text) {
	                    alert("Ocurrio un error al obtener los documentos", text); //Mensaje de error
	                    $("#buttonConsultar").button("enable");
	                    $("#loader").hide();
	                    $("#gbox_listaArchivos").show();
	                }
	            });
			}
        }
		function verDocumento() {
			window.open("./restManager/consultasManager/archivo/"+this.id)
		}
		function configurar() {
			$.ajax({
                type: "Get",
                url: "./restManager/consultasManager/configuracion",
                data: "",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    if (data === null || data === undefined) {
                    	alert("Ocurrio un error al obtener la configuracion", text); //Mensaje de error
                    }
                    $("#numDocs").val(data.nroDocDevolver);
                    $("#condicionCorte").val(data.condicionCorteTf)
                    $("#spanErrorNumDocs").hide();
                    $("#spanErrorCorte").hide();
                    $("#dialogConfigurar").dialog({
        				width: 360,
        				height: 290,
        				resizable: false,
        	            modal: true,
        	            buttons: {
        	                Guardar: function () {
        	                	$("#spanErrorNumDocs").hide();
        	                    $("#spanErrorCorte").hide();
        	                	var numDocs =$("#numDocs").val();
                    			var condCorte =$("#condicionCorte").val();
        	                	if(isNaN(numDocs)){
        	                		$("#spanErrorNumDocs").html("Debe ser un número");
        	                		$("#spanErrorNumDocs").show();
        	                		return;
        	                	}
        	                	else{
        	                		if(parseInt(numDocs)<0){
        	                			$("#spanErrorNumDocs").html("Debe ser mayor a 0");
            	                		$("#spanErrorNumDocs").show();
            	                		return;
        	                		}
        	                	}
        	                	if(isNaN(condCorte)){
        	                		$("#spanErrorCorte").html("Debe ser un número");
        	                		$("#spanErrorCorte").show();
        	                		return;
        	                	}
        	                	else{
        	                		if(parseInt(condCorte)<0){
        	                			$("#spanErrorCorte").html("Debe ser mayor a 0");
            	                		$("#spanErrorCorte").show();
            	                		return;
        	                		}
        	                	}
        	                	$.ajax({
        	                        type: "Post",
        	                        url: "./restManager/consultasManager/configuracion",
        	                        data: '{"condicionCorteTf": "'+parseInt(condCorte)+'","nroDocDevolver": "'+parseInt(numDocs)+'"}',
        	                        contentType: "application/json; charset=utf-8",
        	                        dataType: "json",
        	                        success: function (data) {
        	                            if (data === null || data === undefined) {
        	                            	alert("Ocurrio un error al guardar la configuracion", text); //Mensaje de error
        	                            }
        	                            if(condCorte==data.condicionCorteTf && numDocs==data.nroDocDevolver){
        	                            	$("#dialogGuardado").dialog({
        	                					width: 300,
        	                					height: 230,
        	                					resizable: false,
        	                	                modal: true,
        	                	                buttons: {
        	                	                    Ok: function () {
        	                	                        $(this).dialog("close");
        	                	                    }
        	                	                }
        	                	            });
        	                            }
        	                        },
        	                        error: function (text) {
        	                            alert("Ocurrio un error al guardar la configuracion", text); //Mensaje de error
        	                        }
        	                    });
        	                	$(this).dialog("close");
        	                },
        	                Cancelar: function () {
        	                    $(this).dialog("close");
        	                }
        	            }
        	        });
                },
                error: function (text) {
                    alert("Ocurrio un error al obtener la configuracion", text); //Mensaje de error
                }
            });
		}
	</script>
</head>
<body>
	<div id="accordion" style="margin-right: auto; margin-left: auto; margin-top: 50px; width: 1200px;">
		<div>
			<h3><a href="#">Motor de Busqueda de Información</a></h3>
			<div id="contenedor">
				<div class="ui-widget-shadow ui-corner-all" style="position: absolute; left: 50px; top: 30px; width: 204px; height: 299px;"></div>
				<div class="ui-widget ui-widget-content ui-corner-all" align="center" style="position: absolute; left: 50px; top: 30px; padding: 10px; width: 182px; height: 277px;">
					<img src="./res/Chewie.jpg" alt="Chewie"/>
					<button id="buttonConfigurar" style="margin-left: 5px; margin-top: 40px;">Configurar</button>
				</div>
				<div align="center" style="margin-left: 240px; width: 900px; padding: 10px;">
					<div align="center" style="margin-bottom: 30px;">
						<span style="font-weight: bold; font-size: 20px;">Busqueda:</span>
						<input id="consulta" style="margin-right: 50px;"/>
						<button id="buttonConsultar">Buscar</button>
					</div>
					<div id="loader" style="margin-top:50px; display: none;">
			            <img id="logoCargando" alt="Logo cargando" src="./res/loader.gif" style="display: block;"/>
	                    <span>Cargando publicaciones...</span>
		            </div>
					<table id="listaArchivos"></table>
					<div id="pagerArchivos"></div>
				</div>
			</div>
		</div>
	</div>
    <div id="dialogVacio" title="Error" style="display:none;">
	    <p>
		    <span class="ui-icon ui-icon-circle-close" style="float:left; margin:0 7px 50px 0;"></span>
		    El input de consulta no debe estar vacio.
	    </p>
    </div>
    <div id="dialogConfigurar" title="Seleccione las configuraciones" style="display:none;">
        <div>
        	<span style="margin-right: 20px;">Número de documentos a devolver</span>
            <input id="numDocs" style="width: 115px;"/>
            <span id="spanErrorNumDocs" style="color: red; display: none;"></span>
            <br/><br/>
	        <span style="margin-right: 100px;">Condición de corte</span>
	        <input id="condicionCorte" style="width: 115px;"/>
	        <span id="spanErrorCorte" style="color: red; display: none;"></span>
        </div>
    </div>
    <div id="dialogGuardado" title="Info" style="display:none;">
	    <p>
		    <span class="ui-icon ui-icon-check" style="float:left; margin:0 7px 50px 0;"></span>
		    La configuración se guardo correctamente
	    </p>
    </div>
</body>
</html>